<template>
   <div>
       <el-dialog title="规格信息" :visible.sync="dialogFormVisible" @close="">
               <el-card class="box-card" v-for="(spec,index) in specifications">
                   <div slot="header" class="clearfix">
                       <span>{{spec.group}}</span>
                       <el-button class="btn" type="text" @click="addParam(spec)">添加规格</el-button>
                       <el-button class="btn" type="text" @click="deleteGroup(index)">删除分组</el-button>
                   </div>
                   <el-collapse>
                       <el-collapse-item  v-for="(p,index) in spec.params ">
                           <template slot="title">
                              {{p.k}}<i class="header-icon el-icon-info"></i>
                               <el-button class="btn" type="text"  icon="el-icon-delete" @click="deleteParam(spec.params,index)"></el-button>
                           </template>
                            <el-checkbox label="是否全局" v-model="p.global"></el-checkbox>
                            <el-checkbox label="是否搜索" v-model="p.searchable"></el-checkbox>
                            <el-checkbox label="是否数字" v-model="p.numerical"></el-checkbox>
                           <div style="margin: 5px">
                               <el-button class="button-new-tag" size="small" @click="addOption(p.options)">添加选项值
                               </el-button>
                           </div>
                           <el-tag
                                   :key="tag"
                                   v-for="tag in p.options"
                                   closable
                                   :disable-transitions="false"
                                   @close="deleteOption(p.options,tag)">
                               {{tag}}
                           </el-tag>
                       </el-collapse-item>

                   </el-collapse>
               </el-card>
           <div slot="footer" class="dialog-footer">
               <el-button @click="addGroup">添加分组</el-button>
               <el-button @click="resetSpec">重置规格</el-button>
               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="saveSpec">确 定</el-button>
           </div>
       </el-dialog>
<!--       树形控件-->
       <el-tree
               style="width: 40%"
               :data="data"
               node-key="id"
               @node-click="clickCategory"
               default-expand-all
               :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => showSpec(data)">
            规格
          </el-button>
        </span>
      </span>
       </el-tree>
   </div>
</template>

<script>
    export default {
        name: "Specification",
        data() {
            return {
                data: [],   // 树的节点数据
                dialogFormVisible: false,
                formLabelWidth: '120px',
                //已经选择的品牌加入到form里面去了，一起传送给后台
                specifications:[],
                isSave:false ,   //是否添加，true是，false更新
                categoryId:0,
                originSpec:[]   //初始的规格
            }
        },
        methods:{
            // 根据父分类加载子分类
            loadCategory(pid) {
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + pid)
                    .then(res => {
                        if (res.data.code == 1) {
                            this.data = res.data.data;
                        }
                    })
            },
            //点击父分类后加载子分类，data相当于子节点的数据
            clickCategory(data) {
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/" + data.id)
                    .then(res => {
                        if (res.data.code == 1) {
                            //给当前节点加children属性
                            this.$set(data, 'children', res.data.data)
                        }
                    })
            },
            //data为当前被点击的树节点
            showSpec(data){
                this.categoryId=data.id;
                this.$http.get("http://api.blb.com/api/goods-api/spec/category/"+data.id)
                    .then(res=>{
                       if (res.data.code==1){
                           //判断规格为空，就提示用户添加，否则就进行更新
                           // 注意，后台是json返回后台会转成数组，取0下标的
                           if (res.data.data[0]==null){
                               this.$confirm("是否添加新的规格")
                                   .then(()=>{
                                       this.isSave=true;
                                       this.dialogFormVisible=true;
                                   })
                           }else{
                               this.specifications=JSON.parse(res.data.data[0].specifications);
                               // 注意这里不能直接复制，否则就是同一个对象  this.originSpec=this.specifications;  这样是错的
                               this.originSpec=JSON.parse(res.data.data[0].specifications);
                               this.isSave=false;
                               this.dialogFormVisible=true;
                           }
                       }

                    });

            },
            // 动态编辑标签
            // 删除指定的标签
            deleteOption(options,tag){
                //从数组中删除选项
                options.splice(options.indexOf(tag),1)

            },
            // 添加选项值
            addOption(options){
                this.$prompt("请输入选项值")
                    .then(({value})=>{
                        options.push(value)
                    })
            },
           // 添加新的分组
            addGroup(){
                this.$prompt("请输入分组名称")
                    .then(({value})=>{
                       this.specifications.push({group:value,params:[]});
                    });
            },
            // 添加新的规格sepc是参数，可以随便定义
            addParam(spec){
                this.$prompt("请输入新的规格")
                    .then(({value})=>{
                        spec.params.push({k:value,searchable:false,global:false,options:[]})
                    });

            },
            // 删除规格组
            deleteGroup(index){
                this.specifications.splice(index,1)
            },
            //删除参数
            deleteParam(params,index){
                params.splice(index,1);
            },

            //保存商品的规格到数据库
            saveSpec(){
                if (this.isSave){
                    // isSave是判断是否规格为空的标识
                    // 1.如果规格为空就添加
                    // 注意对象传到前台需要转换Json.stringfy
                    this.$http.post("http://api.blb.com/api/goods-api/spec",
                        {categoryId:this.categoryId,specifications:JSON.stringify(this.specifications)})
                        .then(res=>{
                            if (res.data.code==1){
                                this.$message.success("添加规格成功");
                            }
                        });

                }else {
                    // 规格不为空就更新
                    this.$http.put("http://api.blb.com/api/goods-api/spec",
                        {categoryId:this.categoryId,specifications:JSON.stringify(this.specifications)})
                        .then(res=>{
                            if (res.data.code==1){
                                this.$message.warning("更新规格成功")
                            }
                        });

                }
                this.dialogFormVisible=false;
            },
            // 重置规格
            resetSpec(){
                this.specifications=this.originSpec;
            }
        },
        mounted() {
            this.loadCategory(0);
        }
    }
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .btn{
        float:right;
        margin-right:10px;
    }
</style>